<template>
  <div class="products-page">
    <front-header></front-header>
    <div class="main-content">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2 class="page-title">
          <el-icon><ShoppingBag /></el-icon>
          <span>全部商品</span>
        </h2>
        <div class="page-subtitle">精选优质农产品，品质保障</div>
      </div>

      <!-- 顶部过滤器 -->
      <div class="filter-bar">
        <div class="filter-group">
          <el-dropdown trigger="click" @command="handleCategoryChange">
            <span class="filter-label">
              <el-icon><Menu /></el-icon>
              分类
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="">全部商品</el-dropdown-item>
                <el-dropdown-item
                  v-for="category in categories"
                  :key="category.id"
                  :command="category.id"
                >{{ category.name }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-dropdown trigger="click" @command="handlePriceRangeChange">
            <span class="filter-label">
              <el-icon><PriceTag /></el-icon>
              价格
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="">全部价格</el-dropdown-item>
                <el-dropdown-item
                  v-for="(range, index) in priceRanges"
                  :key="index"
                  :command="range.value"
                >{{ range.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>

          <el-dropdown trigger="click" @command="handleSortChange">
            <span class="filter-label">
              <el-icon><Sort /></el-icon>
              排序
              <el-icon class="el-icon--right"><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item
                  v-for="option in sortOptions"
                  :key="option.value"
                  :command="option.value"
                >{{ option.label }}</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>

        <div class="search-box">
          <el-input 
            v-model="searchKeyword" 
            placeholder="搜索商品" 
            :prefix-icon="Search"
            clearable
            @clear="handleSearch"
            @keyup.enter="handleSearch"
          >
          </el-input>
        </div>
      </div>

      <!-- 已选择的过滤条件 -->
      <div class="selected-filters" v-if="hasFilters">
        <el-tag 
          v-if="selectedCategory" 
          closable
          @close="handleCategoryChange('')"
        >
          分类: {{ getCategoryName(selectedCategory) }}
        </el-tag>
        <el-tag 
          v-if="priceRange" 
          closable
          @close="handlePriceRangeChange('')"
        >
          价格: {{ getPriceRangeLabel(priceRange) }}
        </el-tag>
        <el-tag 
          v-if="sortBy !== 'default'" 
          closable
          @close="handleSortChange('default')"
        >
          {{ getSortLabel(sortBy) }}
        </el-tag>
        <el-tag 
          v-if="searchKeyword" 
          closable
          @close="clearSearch"
        >
          关键词: {{ searchKeyword }}
        </el-tag>
      </div>

      <!-- 商品列表 -->
      <div class="products-grid" v-loading="loading">
        <transition-group name="fade-list" tag="div" class="grid-container">
          <div 
            v-for="product in products" 
            :key="product.id"
            class="product-item"
          >
            <product-card :product="product" />
          </div>
        </transition-group>
        
        <div v-if="!loading && products.length === 0" class="empty-state">
          <el-icon><Goods /></el-icon>
          <p>暂无相关商品</p>
          <el-button type="primary" text @click="resetFilters">清除筛选条件</el-button>
        </div>
      </div>

      <!-- 分页 -->
      <div class="pagination-wrapper" v-if="total > 0">
        <el-pagination
          background
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          :page-sizes="[12, 24, 36, 48]"
          layout="sizes, prev, pager, next, jumper, total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        >
        </el-pagination>
      </div>
    </div>
    <front-footer></front-footer>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElDropdown, ElDropdownMenu, ElDropdownItem, ElInput, ElTag, ElButton, ElPagination, ElIcon } from 'element-plus'
import { ShoppingBag, Menu, ArrowDown, PriceTag, Sort, Search, Goods } from '@element-plus/icons-vue'
import { debounce } from 'lodash'
import FrontHeader from '@/components/front/FrontHeader.vue'
import FrontFooter from '@/components/front/FrontFooter.vue'
import ProductCard from '@/components/front/ProductCard.vue'
import Request from '@/utils/request'

// 路由实例
const route = useRoute()
const router = useRouter()

// 响应式数据
const loading = ref(false)
const products = ref([])
const categories = ref([])
const selectedCategory = ref('')
const priceRange = ref('')
const sortBy = ref('default')
const searchKeyword = ref('')
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(0)
let debouncedSearch = null

const priceRanges = [
  { label: '0-50元', value: '0-50' },
  { label: '50-100元', value: '50-100' },
  { label: '100-200元', value: '100-200' },
  { label: '200元以上', value: '200-' }
]

const sortOptions = [
  { label: '默认排序', value: 'default' },
  { label: '销量优先', value: 'sales,desc' },
  { label: '价格从低到高', value: 'price,asc' },
  { label: '价格从高到低', value: 'price,desc' }
]

// 计算属性
const hasFilters = computed(() => {
  return selectedCategory.value || priceRange.value || sortBy.value !== 'default' || searchKeyword.value
})

// 获取商品分类
const getCategories = async () => {
  try {
    const res = await Request.get('/category/all')
    if (res.code === '0') {
      categories.value = res.data
    }
  } catch (error) {
    console.error('获取分类失败:', error)
  }
}

// 获取商品列表
const getProducts = async () => {
  loading.value = true
  try {
    const params = {
      status: 1,
      currentPage: currentPage.value,
      size: pageSize.value
    }

    // 添加分类筛选
    if (selectedCategory.value) {
      params.categoryId = selectedCategory.value
    }

    // 添加价格区间筛选
    if (priceRange.value) {
      const [min, max] = priceRange.value.split('-')
      if (min) params.minPrice = min
      if (max) params.maxPrice = max
    }

    // 添加排序
    if (sortBy.value !== 'default') {
      const [field, order] = sortBy.value.split(',')
      params.sortField = field
      params.sortOrder = order
    }

    // 添加搜索关键词
    if (searchKeyword.value) {
      params.name = searchKeyword.value
    }

    const res = await Request.get('/product/page', { params })
    if (res.code === '0') {
      if (res.data && res.data.records) {
        products.value = res.data.records.map(product => ({
          ...product,
          isFavorite: false,
          imageUrl: product.imageUrl?.startsWith('http') ? product.imageUrl : `${product.imageUrl}`
        }))
        total.value = res.data.total
      } else {
        products.value = []
        total.value = 0
      }
    } else {
      products.value = []
      total.value = 0
    }
  } catch (error) {
    console.error('获取商品列表失败:', error)
    ElMessage.error('获取商品列表失败')
    products.value = []
    total.value = 0
  } finally {
    loading.value = false
  }
}

const handleCategoryChange = (categoryId) => {
  selectedCategory.value = categoryId
  currentPage.value = 1
  getProducts()
}

const handlePriceRangeChange = (range) => {
  priceRange.value = range
  currentPage.value = 1
  getProducts()
}

const handleSortChange = (value) => {
  sortBy.value = value
  currentPage.value = 1
  getProducts()
}

const handleSearch = () => {
  debouncedSearch()
}

const handlePageChange = (page) => {
  currentPage.value = page
  getProducts()
}

const handleRouteChange = () => {
  const query = {}
  if (selectedCategory.value) {
    query.category = selectedCategory.value
  }
  if (searchKeyword.value) {
    query.keyword = searchKeyword.value
  }
  // 更新URL，但不触发路由变化
  router.replace({ query }).catch(() => {})
}

const getCategoryName = (id) => {
  const category = categories.value.find(c => c.id === id)
  return category ? category.name : '全部'
}

const getPriceRangeLabel = (value) => {
  const range = priceRanges.find(r => r.value === value)
  return range ? range.label : '全部'
}

const getSortLabel = (value) => {
  const option = sortOptions.find(o => o.value === value)
  return option ? option.label : '默认排序'
}

const clearSearch = () => {
  searchKeyword.value = ''
  handleSearch()
}

const resetFilters = () => {
  selectedCategory.value = ''
  priceRange.value = ''
  sortBy.value = 'default'
  searchKeyword.value = ''
  currentPage.value = 1
  getProducts()
}

const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  getProducts()
}

// 监听器
watch(searchKeyword, () => {
  handleSearch()
  handleRouteChange()
})

watch(selectedCategory, () => {
  handleRouteChange()
})

watch(sortBy, () => {
  currentPage.value = 1
  getProducts()
})

// 生命周期钩子
onMounted(() => {
  debouncedSearch = debounce(() => {
    currentPage.value = 1
    getProducts()
  }, 300)

  getCategories()
  getProducts()

  const { category, keyword } = route.query
  if (category) selectedCategory.value = category
  if (keyword) {
    searchKeyword.value = keyword
    handleSearch()
  }
})

onBeforeUnmount(() => {
  if (debouncedSearch) {
    debouncedSearch.cancel()
  }
})
</script>

<style scoped>
.products-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
}

.main-content {
  flex: 1;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* 页面标题样式 */
.page-header {
  margin-bottom: 24px;
  background: white;
  padding: 20px 24px;
  border-radius: 12px;
  border: 1px solid #ebeef5;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.page-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, #67C23A, #85ce61);
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  color: #2c3e50;
}

.page-title :deep(.el-icon) {
  font-size: 28px;
  color: #67C23A;
}

.page-subtitle {
  margin-top: 4px;
  font-size: 14px;
  color: #909399;
  padding-left: 36px;
}

/* 过滤器样式 */
.filter-bar {
  background: white;
  border-radius: 12px;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border: 1px solid #ebeef5;
}

.filter-group {
  display: flex;
  gap: 24px;
  position: relative;
}

.filter-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  color: #606266;
  font-size: 14px;
  position: relative;
}

.filter-label:hover {
  background: rgba(103, 194, 58, 0.05);
  color: #67C23A;
}

.filter-label::after {
  content: '';
  position: absolute;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  background: #ebeef5;
}

.filter-group > :last-child .filter-label::after {
  display: none;
}

.search-box {
  width: 280px;
}

.search-box :deep(.el-input__inner) {
  border-radius: 6px;
  border: 1px solid #ebeef5;
  transition: all 0.3s ease;
}

.search-box :deep(.el-input__inner:hover) {
  border-color: #c0c4cc;
}

.search-box :deep(.el-input__inner:focus) {
  border-color: #67C23A;
}

/* 已选择的过滤条件 */
.selected-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 24px;
  background: #f8faf5;
  border-radius: 12px;
}

.selected-filters :deep(.el-tag) {
  padding: 0 12px;
  height: 28px;
  line-height: 28px;
  border-radius: 14px;
  background: white;
  border: 1px solid #e4e7ed;
  color: #606266;
}

.selected-filters :deep(.el-tag .el-tag__close) {
  background-color: transparent;
  color: #909399;
  font-weight: bold;
}

.selected-filters :deep(.el-tag .el-tag__close:hover) {
  background-color: #909399;
  color: white;
}

/* 下拉菜单样式优化 */
:deep(.el-dropdown-menu) {
  padding: 6px;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

:deep(.el-dropdown-menu__item) {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 4px;
  margin: 2px 0;
  color: #606266;
}

:deep(.el-dropdown-menu__item:hover) {
  background-color: rgba(103, 194, 58, 0.1);
  color: #67C23A;
}

:deep(.el-dropdown-menu__item.is-disabled) {
  color: #c0c4cc;
  cursor: not-allowed;
  background-color: transparent;
}

/* 商品网格 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 4px;
}

.product-item {
  transition: all 0.3s ease;
}

.product-item:hover {
  transform: translateY(-4px);
}

/* 动画效果 */
.fade-list-enter-active, .fade-list-leave-active {
  transition: all 0.3s ease;
}

.fade-list-enter-from, .fade-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 60px 0;
  color: #909399;
}

.empty-state :deep(.el-icon) {
  font-size: 48px;
  margin-bottom: 16px;
}

.empty-state p {
  font-size: 16px;
  margin: 0 0 16px;
}

/* 分页 */
.pagination-wrapper {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: #67C23A;
}

/* 响应式布局优化 */
@media (max-width: 768px) {
  .page-header {
    margin-bottom: 20px;
  }

  .page-title {
    font-size: 20px;
  }

  .page-title :deep(.el-icon) {
    font-size: 24px;
  }

  .page-subtitle {
    padding-left: 36px;
    font-size: 13px;
  }

  .filter-bar {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
  }

  .search-box {
    width: 100%;
  }

  .filter-group {
    width: 100%;
    justify-content: space-between;
    gap: 8px;
  }

  .filter-label::after {
    display: none;
  }

  .selected-filters {
    padding: 12px 16px;
  }

  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
  }
}
</style>
